Update v3.5.7 (#12)

* Merge request (#11)

* Update v3.5.5 

> Now Skip button will hide if player is not in focused state.
> Added some options to player.
> Manga images should be displayed now.

* Update videoPlayer.js

* Revamp hero section #1

* UI Improvement

> Updating main page
> Updated Genres selection using params method
> Added search bar v1.0 on main page ( [ctrl + space] to access search bar )

* update meta

* Update [...id].js

* Update [...id].js

> Back to ssr I guess

* update episode selector

* Update [...info].js

* Update UI

> Added On-Going section for AniList user

* Update content.js

* added dynamic og

* Update og.jsx

* Update og

* Update og.jsx

* update og and id fallback

> Added fallback for anime info if it's not found

* Update v3.5.7

> Added On-Going section for AniList user
> Added Genre section
> Added dynamic Open Graph when sharing anime
> Added Episode Selector above information

1 files changed, 95 insertions, 34 deletions

diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index ae6ac34..dc385f9 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -140,16 +140,18 @@ const infoQuery = `query ($id: Int) {
     }
 }`;
 
-export default function Info() {
-  const { data: session, status } = useSession();
+export default function Info({ info, color }) {
+  const { data: session } = useSession();
   const [data, setData] = useState(null);
-  const [info, setInfo] = useState(null);
+  // const [infos, setInfo] = useState(null);
   const [episode, setEpisode] = useState(null);
   const [loading, setLoading] = useState(false);
   const [progress, setProgress] = useState(0);
   const [statuses, setStatuses] = useState(null);
   const [stall, setStall] = useState(false);
-  const [color, setColor] = useState(null);
+  const [domainUrl, setDomainUrl] = useState("");
+
+  // console.log(info);
 
   const [showAll, setShowAll] = useState(false);
   const [open, setOpen] = useState(false);
@@ -164,13 +166,15 @@ export default function Info() {
     (data) => data.mediaRecommendation
   );
 
-  // const [log, setLog] = useState(null);
-  // console.log(rec);
-
   useEffect(() => {
+    const { protocol, host } = window.location;
+    const url = `${protocol}//${host}`;
+
+    setDomainUrl(url);
+
     const defaultState = {
       data: null,
-      info: null,
+      // info: null,
       episode: null,
       loading: true,
       statuses: null,
@@ -204,23 +208,23 @@ export default function Info() {
       if (id) {
         setLoading(false);
         try {
-          const [res, info] = await Promise.all([
+          const [res] = await Promise.all([
             fetch(`https://api.moopa.my.id/meta/anilist/info/${id?.[0]}`),
-            fetch("https://graphql.anilist.co/", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                query: infoQuery,
-                variables: {
-                  id: id?.[0],
-                },
-              }),
-            }),
+            // fetch("https://graphql.anilist.co/", {
+            //   method: "POST",
+            //   headers: {
+            //     "Content-Type": "application/json",
+            //   },
+            //   body: JSON.stringify({
+            //     query: infoQuery,
+            //     variables: {
+            //       id: id?.[0],
+            //     },
+            //   }),
+            // }),
           ]);
           const data = await res.json();
-          const infos = await info.json();
+          // const infos = await info.json();
 
           if (res.status === 500) {
             setEpisode(null);
@@ -229,10 +233,10 @@ export default function Info() {
           } else if (res.status === 404) {
             window.location.href("/404");
           }
-          setInfo(infos.data.Media);
+          // setInfo(infos.data.Media);
           // setLog(data);
 
-          const textColor = setTxtColor(infos.data.Media.coverImage?.color);
+          // const textColor = setTxtColor(infos.data.Media.coverImage?.color);
 
           if (!data || data?.episodes?.length === 0) {
             const res = await fetch(
@@ -246,19 +250,19 @@ export default function Info() {
             } else {
               setEpisode(datas.episodes);
             }
-            setColor({
-              backgroundColor: `${data?.color || "#ffff"}`,
-              color: textColor,
-            });
+            // setColor({
+            //   backgroundColor: `${data?.color || "#ffff"}`,
+            //   color: textColor,
+            // });
             setStall(true);
           } else {
             setEpisode(data.episodes);
           }
 
-          setColor({
-            backgroundColor: `${data?.color || "#ffff"}`,
-            color: textColor,
-          });
+          // setColor({
+          //   backgroundColor: `${data?.color || "#ffff"}`,
+          //   color: textColor,
+          // });
 
           if (session?.user?.name) {
             const response = await fetch("https://graphql.anilist.co/", {
@@ -339,6 +343,21 @@ export default function Info() {
             ? info?.title?.romaji || info?.title?.english
             : "Retrieving Data..."}
         </title>
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta
+          name="twitter:title"
+          content={`Moopa - ${info.title.romaji || info.title.english}`}
+        />
+        <meta
+          name="twitter:description"
+          content={`${info.description?.slice(0, 180)}...`}
+        />
+        <meta
+          name="twitter:image"
+          content={`${domainUrl}/api/og?title=${
+            info.title.romaji || info.title.english
+          }&image=${info.bannerImage || info.coverImage.extraLarge}`}
+        />
       </Head>
       <Modal open={open} onClose={() => handleClose()}>
         <div>
@@ -743,13 +762,15 @@ export default function Info() {
                         //   Something went wrong, can't retrieve any episodes :/
                         // </p>
                         <div className="flex flex-col">
-                          <h1>{epiStatus} while retrieving data</h1>
+                          {/* <h1>{epiStatus} while retrieving data</h1> */}
                           <pre
                             className={`rounded-md ${getLanguageClassName(
                               "bash"
                             )}`}
                           >
-                            <code>{error}</code>
+                            <code>
+                              Something went wrong while retrieving data :/
+                            </code>
                           </pre>
                         </div>
                       )}
@@ -785,6 +806,46 @@ export default function Info() {
   );
 }
 
+export async function getServerSideProps(context) {
+  const { id } = context.query;
+
+  const res = await fetch("https://graphql.anilist.co/", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      query: infoQuery,
+      variables: {
+        id: id?.[0],
+      },
+    }),
+  });
+
+  const json = await res.json();
+  const data = json?.data?.Media;
+
+  if (!data) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const textColor = setTxtColor(data?.coverImage?.color);
+
+  const color = {
+    backgroundColor: `${data?.coverImage?.color || "#ffff"}`,
+    color: textColor,
+  };
+
+  return {
+    props: {
+      info: data,
+      color: color,
+    },
+  };
+}
+
 function convertSecondsToTime(sec) {
   let days = Math.floor(sec / (3600 * 24));
   let hours = Math.floor((sec % (3600 * 24)) / 3600);